import React from 'react';
import Typography from 'material-ui/Typography';
import LinearProgress from 'material-ui/Progress/LinearProgress';

function Html({component: Comp, content, index:parent = 0, ...props}) {
  const children = typeof content === 'object' ? (
    content instanceof Array
      ? content.map((child, index) => <Html key={`${parent}.${index}`} index={`${parent}.${index}`} {...child} />)
      : <Html {...content}/>
  ) : content;

  return (
    Comp
      ? <Comp {...props}>{children}</Comp>
      : <Typography {...props}>{children}</Typography>
  )
};


const Article = ({content = []}) => (
  content.map((props, index) => (
    <Html index={index} key={`artical:${index}`} {...props}/>
  ))
);

export default Article;